<template>
	<view class="l_waterfall">
		<view>
			<view class="water_col" ref="water_col" v-for="(item, index) in group" :key="index"
				:id="`water_col_box_${index}`" :style="{ 'width': w, 'marginLeft': mar }">
				<view class="water_col_block" v-for="(ite, ind) in optimize['column_' + index]" :key="ind"
					@click="gogoodsdetail(ite.ID)">
					<image :src="ite.img" mode="widthFix" @load="emitHeight(ite, ind)" @error="emitHeight(ite, ind)">
					</image>
					<view class="t textsl2">
						{{ ite.name }}
					</view>

					<view class="price">
						<view class="left">
							<view class="price_l">
							￥<text>{{ $toFiexd(ite.price, 2) }}</text>
							</view>
							<view class="money">
								￥{{ite.market}}
							</view>
						</view>
						<view class="price2">
							{{ ite.sales }}人付款
						</view>
					</view>
<!-- 					<view class="d" v-show="ite.business_id != 0">
						<image :src="ite.business.shop_head" mode=""></image>
						{{ ite.business.name }}
					</view> -->
				</view>
			</view>
		</view>
		<empty v-if="!optimize['column_0'].length"></empty>
	</view>
</template>

<script>
export default {
	name: "lj-waterfall",
	props: {
		group: {
			type: Number,
			default: 2,
		},
		list: {
			type: Array,
			default: () => {
				return []
			}
		},
		pageSize: {
			type: Number,
			default: 10,
		}
	},
	watch: {
		group: {
			handler(newVal, oldVal) {
				this.handleFun()
				setTimeout(() => {
					this.init(0)
				}, 10)
			},
			immediate: true //初始化绑定时就会执行handler方法
		},
		list: {
			handler(newVal, oldVal) {
				let that = this
				setTimeout(() => {
					let num = newVal.length / that.pageSize
					console.log(that.pageSize * num, "newVal")
					that.init(that.pageSize * num)
					// this.init(newVal.length - this.pageSize)
					// 数组push的时候判断有一点问题，应该从上一次结束 
				}, 10)
			},
			immediate: true //初始化绑定时就会执行handler方法
		}
	},
	data() {
		return {
			widthGroup: {
				2: 360,
				3: 360,
				4: 180,
				5: 140,
			},
			optimize: {
				list: {},
				proportion: 1,
			},
			temporaryArr: [],
			bool: false,
			lists: [

			]
		};
	},
	computed: {
		w() {
			const boxW = `${100 / this.group - this.optimize.proportion}%`
			return boxW
		},
		mar() {
			const c = `${(this.optimize.proportion * this.group / (this.group + 1))}`;
			const m = `${(parseInt(c * 1000) / 1000).toFixed(3)}%`
			return m;
		}
	},
	methods: {
		gogoodsdetail(id) {
			uni.navigateTo({
				url: '/pages/commodity/details?id=' + id
			})
		},
		emitHeight(ite, ind) {
			this.init(ite.index + 1)
		},
		async init(index) {
			if (index >= this.list.length) return false;
			const boxHeight = await this.getBoxHeight();
			this.processingFun(boxHeight, index)
		},
		processingFun(boxHeight, index) {
			this.optimize[`column_${boxHeight.column}`].push({
				...this.list[index],
				index,
			})
			uni.createSelectorQuery().select('#water_col').boundingClientRect(rect => {

			}).exec()
			this.$forceUpdate()
		},
		async getBoxHeight() {
			return new Promise(resolve => {
				const heightArr = [];
				for (let i = 0; i < this.group; i++) {
					const query = uni.createSelectorQuery().in(this);
					query.select(`#water_col_box_${i}`).boundingClientRect(data => {
						heightArr.push({
							column: i,
							height: data.height
						});
					}).exec(() => {
						if (this.group <= heightArr.length) {
							resolve(this.compareHeight(heightArr, 'height'));
						}
					});
				}
			})
		},
		compareHeight(arr, s) {
			let oh = arr[0][s]
			let mo = []
			for (let i = arr.length - 1; i >= 0; i--) {
				if (arr[i][s] <= oh) {
					oh = arr[i][s]
				}
			}
			mo = arr.filter(i => i[s] == oh);
			return mo[0]
		},
		handleFun() {
			for (let i = 0; i < this.group; i++) {
				this.optimize[`column_${i}`] = []
			}
		}
	},
	mounted() {
		this.handleFun()
	}
}
</script>

<style lang="scss" scoped>
.l_waterfall {
	position: relative;
	.water_col {
		float: left;
		
	}
	
}
.water_col_block {
	margin: 0 10upx;
	margin-bottom: 10rpx;
	border-radius: 20upx;
	padding-bottom: 10upx;
	margin-bottom: 20upx;
	overflow: hidden;
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;

	.t {
		font-size: 28rpx;
		font-weight: bold;
		color: #3D444D;
		width: 90%;
		padding: 0 5%;
		margin: 5% 0;
	}

	.price {
		padding: 0 5%;
		color: #FF4E00;
		font-size: 32upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
			.left {
				display: flex;
				align-items: flex-end;
			
				.price_l {
					font-weight: bold;
					font-size: 10px;
					color: #FF0034;
					text-align: left;
					font-style: normal;
					text-transform: none;
			
					text {
						font-size: 16px;
					}
				}
			
				.money {
					margin-left: 5px;
					font-weight: 500;
					font-size: 10px;
					color: #909090;
					text-align: left;
					font-style: normal;
					text-decoration-line: line-through;
					text-transform: none;
				}
			}
		.price2 {
			color: #999;
			font-size: 20upx;
		}
	}

	.d {
		width: 92%;
		font-size: 27rpx;
		color: #797979;
		padding: 4%;
		display: flex;
		align-items: center;

		image {
			width: 40upx;
			height: 40upx;
			border-radius: 50%;
			margin-right: 10upx;
		}
	}

	image {
		display: block;
		width: 100%;
		border-radius: 6rpx;
	}
}
</style>